<style scoped="scoped" lang="scss">
    @import "./login.scss";
</style>
<template>
    <view class="content">
		<image class="logo" src="../../static/img/homeHL.png"></image>
		
        <view class="input-group">
            <view class="input-row border">
                <input type="text" v-model="login_data.loginname" placeholder="手机号码/用户名">
            </view>
            <view class="input-row border">
                <input type="text" password="true" v-model="login_data.password" placeholder="密码">
				<navigator url="../company_code/company_code?from=忘记密码"  v-if="randomcode_onoff==false"><text>忘记密码？</text></navigator>
            </view>
			<view class="input-row border" v-if="randomcode_onoff">
				<input type="text"  v-model="login_data.randomcode" placeholder="动态码">
				<image :src="RandomCode_img" @tap="get_code"></image>
				<navigator url="../company_code/company_code?from=忘记密码"><text>忘记密码？</text></navigator>
			</view>
        </view>
		
        <view class="btn-row">
            <button type="primary" class="primary" @tap="bindLogin">登录</button>
			<navigator url="../company_code/company_code?from=注册"><button type="primary" class="primary btn2">注册</button></navigator>
        </view>
		<view class="agreement">
			<checkbox-group @change="checkboxChange">
				<label class="checkbox">
					<checkbox value="用户协议" checked="true" />登陆即代表阅读并同意<navigator url="../agreement/agreement" style="display: inline-block;"><text>服务条款</text></navigator>
				</label>
			</checkbox-group>
		</view>
		
    </view>
</template>

<script>
    import service from '../../service.js';//第三方登录
    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
        data() {
            return {
				ctx_n:'',
				randomcode_onoff:false,//动态码
				RandomCode_img:'',//动态码图片
                providerList: [], //第三方登录的图片及名字
                hasProvider: false, //如果获取了第三方服务就显示图标
				login_data:{
					loginname:'',
					password:'',
					randomid:'',
					randomcode:''
				},
                positionTop: 0,
				
				user_agreement:false,//用户协议
            }
        },
        computed: mapState(['forcedLogin']),//获取
        methods: {
			checkboxChange: function (e) {
				let that=this
				console.log('checkbox发生change事件，携带value值为：' + e.detail.value)
				if(e.detail.value!='用户协议'){
					that.user_agreement=true
				}else{
					that.user_agreement=false
				}
				console.log(that.user_agreement)
			},
// 			...mapMutations([
// 			  将 `this.increment()` 映射为 `this.$store.commit('increment')`
// 			  'increment'
// 			]),
// 			...mapMutations({
// 			  将 `this.add()` 映射为 `this.$store.commit('increment')`
// 			  add: 'increment'
// 			})
            ...mapMutations(['login']),
			// 获取第三方服务供应商
            initProvider() {
                const filters = ['weixin', 'qq', 'sinaweibo'];
                uni.getProvider({
                    service: 'oauth',
                    success: (res) => {
						console.log(res)
                        if (res.provider && res.provider.length) {
                            for (let i = 0; i < res.provider.length; i++) {
                                if (~filters.indexOf(res.provider[i])) {
                                    this.providerList.push({
                                        value: res.provider[i],
                                        image: '../../static/img/' + res.provider[i] + '.png'
                                    });
                                }
                            }
                            this.hasProvider = true;
                        }
                    },
                    fail: (err) => {
                        console.error('获取服务供应商失败：' + JSON.stringify(err));
                    }
                });
            },
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
			//登陆
            bindLogin() {
				let that=this
                /**
                 * 客户端对账号信息进行一些必要的校验。
                 * 实际开发中，根据业务需要进行处理，这里仅做示例。
                 */
                if (this.login_data.password.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '密码最短为 6 个字符'
                    });
                    return;
                }
				if (this.user_agreement) {
					uni.showToast({
						icon: 'none',
						title: '请同意用户协议'
					});
					return;
				}
				console.log(that.login_data)
				if(this.randomcode_onoff){//校验动态码
					this.GLOBAL.doPost(that.ctx_n+'/user/judge_random_code',{id:that.login_data.randomid,randomcode:that.login_data.randomcode},function(res){
						console.log(res);
						if(res==undefined){
							uni.showToast({
								icon: 'none',
								title: '动态码校验失败'
							});
						}else{
							that.login_l()
						}
						
					})
				}else{
					that.login_l()
				}
				
            },
			login_l(){
				let that=this
				//判断服务器http://qstamper.com:8081/user/dir
				that.GLOBAL.userDir('http://qstamper.com:8081/user/dir',{loginname:that.login_data.loginname},function(e){
					console.log(e)
					// that.ctx_n = e.svrurl
					that.ctx_n='http://210.45.123.239:8989'
					//存储用户信息
					uni.setStorage({
						key: 'userDirIp',
						data: that.ctx_n,
						success: function () {
							console.log('success');
						}
					});
					
					// 登陆
					that.GLOBAL.doPost(that.ctx_n+'/user/login',that.login_data,function(res){
						console.log(res);
						if(res!=undefined){
							let res_data=res
							uni.showToast({
								title: '登陆成功',
								icon:'success',
								duration: 2000
							});
							//存储指纹信息
							uni.setStorage({
								key: 'fingerprint_info',
								data: {
									Information:false
								},
								success: function () {
									console.log('success');
								}
							});
							
							//store存储
							setTimeout(()=>{
								uni.reLaunch({
									url: '../main/main',
								})
							},1500)
							//存储用户信息
							uni.setStorage({
								key: 'user_info',
								data: res,
								success: function () {
									console.log('success');
								}
							});
						}else{
							//如果两次输入错误填写验证码
							that.get_code()
						}
						
					})
					
					
				})
				
			},
			
			//获取动态码
			get_code(){
				let that=this
				this.GLOBAL.doPost(that.ctx_n+'/user/random_code',{},function(res){
					console.log(res);
					that.RandomCode_img=res.RandomCode
					that.login_data.randomid=res.ID
					that.randomcode_onoff=true;
				})
			},
			//第三方登录
            oauth(value) {
                uni.login({
                    provider: value,
                    success: (res) => {
                        uni.getUserInfo({
                            provider: value,
                            success: (infoRes) => {
                                /**
                                 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
                                 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
                                 */
                                this.toMain(infoRes.userInfo.nickName);
                            }
                        });
                    },
                    fail: (err) => {
                        console.error('授权登录失败：' + JSON.stringify(err));
                    }
                });
            },
            toMain(userName) {
				//stroe存储
				this.login(userName);
                /**
                 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
                 */
                if (this.forcedLogin) {
                    uni.reLaunch({
                        url: '../main/main',
                    });
                } else {
                    uni.navigateBack();
                }

            },
        },
        onLoad() {
			let that=this
            this.initPosition();
			
        }
    }
</script>


